<!--
 * @Descripttion: 备课设置
 * @Author: wult
 * @Date: 2021-03-29 16:20:40
 * @LastEditTime: 2021-04-06 18:13:51
-->
<template>
  <div class="box">
    <div class="search-header">
      <div>
        <el-button type="primary" size="medium" @click="batchChangePermission">批量设置</el-button>
        <span>* 初始状态与后台备课设置一致</span>
      </div>
      <div>
        <div class="block" style="display: flex; align-items: center">
          <span class="demonstration" style="width: 70px; margin-right: 10px">备授课权限</span>
          <el-select
            v-model="hasPermission"
            @change="getTeacherList"
            size="small"
            style="width: 180px"
          >
            <el-option label="全部" value></el-option>
            <el-option label="启用" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
          </el-select>
        </div>
        <el-input
          size="small"
          style="margin-left: 10px; width: 180px"
          placeholder="请输入教师名/手机号"
          prefix-icon="el-icon-search"
          @input="searchEvent"
          v-model="userName"
        ></el-input>
      </div>
    </div>
    <cus-table
      :auto-request="false"
      ref="tableRef"
      url="/admin/prepareUserConfig/queryPage"
      class="custom-table"
      @selection-change="getTeachersConfig"
    >
      <template #default>
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="教师姓名" width="80px" property="nickname"></el-table-column>
        <el-table-column label="手机号" property="mobile"></el-table-column>
        <el-table-column label="所属校区" property="schoolNames"></el-table-column>
        <el-table-column label="角色" property="roleNames"></el-table-column>
        <el-table-column label="备授课权限" property="phoneNumber">
          <template #default="{ row }">
            <cus-tag
              :status="JSON.parse(row.prepareConfig).hasPermission"
              success-text="启用"
              error-text="停用"
            ></cus-tag>
          </template>
        </el-table-column>
        <el-table-column label="备课任务" width="200px" property="phoneNumber">
          <template #default="{ row }">
            <div class="tags">
              <span class="tag-info" v-if="JSON.parse(row.prepareConfig).directTeaching">直接上课</span>
              <span class="tag-info" v-if="JSON.parse(row.prepareConfig).teachPlan">教案</span>
              <span class="tag-info" v-if="JSON.parse(row.prepareConfig).reviewVideo">说课视频</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" property="phoneNumber">
          <template #default="{ row }">
            <el-button size="small" type="text" @click="setLessonState(row)">设置权限</el-button>
            <el-button size="small" type="text" @click="setTask(row)">修改任务</el-button>
          </template>
        </el-table-column>
      </template>
    </cus-table>
  </div>
</template>

<script lang="ts">
import { Ref, ref, onMounted, computed } from "vue";
import $, { modal } from "$";
import { ElMessage } from "element-plus";
import store from "@/views/course/update/store";
import taskForm from "./components/taskForm.vue";
import axios from "axios";
import SForm from "./components/permission-form.vue";
export default {
  setup() {
    onMounted(() => {
      getTeacherList();
    });
    /** 搜索条件 */
    let hasPermission: Ref<string> = ref("");
    let userName: Ref<string> = ref("");
    let timer: any = "";
    let taskvisible: boolean = false;
    let teachersConfig: any = ref([]);
    /** tags 标签字典 */
    let dictionaryForConfig = [
      {
        label: "教案",
        value: "teachPlan",
        isActive: false,
      },
      {
        label: "说课视频",
        value: "reviewVideo",
        isActive: false,
      },
    ];
    const tableRef: Ref<any> = ref();
    /* 课程信息 */
    let courseInfo: any = computed(() => store.state.courseInfo);

    /** 获取教师列表 */
    const getTeacherList = async () => {
      await tableRef.value.request({
        hasPermission: hasPermission.value,
        userName: userName.value,
        courseId: courseInfo.value.id,
      });
    };
    //   防抖函数
    const searchEvent = () => {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        getTeacherList();
      }, 300);
    };
    /**
     *  设置权限
     *  @params Array ids 选中的教师的ID
     *  @return void
     */
    const setLessonState = async (row: any) => {
      let formGroup: any = await modal.create({
        title: "设置权限",
        width: 520,
        zIndex: 2011,
        component: SForm,
        props: {
          hasPermission: JSON.parse(row.prepareConfig).hasPermission == 1,
        },
      });
      let permission = JSON.parse(row.prepareConfig);
      permission.hasPermission = formGroup.hasPermission ? 1 : 0;
      const params = {
        courseId: courseInfo.value.id,
        userId: row.id,
        config: JSON.stringify(permission),
      };
      // { headers: { "Content-Type": "multipart/form-data" } }
      let res: any = await axios.post<null, { result: boolean; json: any }>(
        "/admin/prepareUserConfig/modifyUserPrepareConfig ",
        params
      );
      if (res.result) {
        ElMessage.success("设置权限成功");
        getTeacherList();
      } else {
        ElMessage.error(res.msg);
      }
    };
    /** 设置任务 */
    const setTask = async (row) => {
      let formGroup: any = await modal.create({
        title: "修改任务",
        width: 520,
        zIndex: 2011,
        component: taskForm,
        props: {
          config: JSON.parse(row.prepareConfig),
        },
      });
      let permission = JSON.parse(row.prepareConfig);
      const params = {
        courseId: courseInfo.value.id,
        userId: row.id,
        config: JSON.stringify(Object.assign(permission, formGroup)),
      };
      // { headers: { "Content-Type": "multipart/form-data" } }
      let res: any = await axios.post<null, { result: boolean; json: any }>(
        "/admin/prepareUserConfig/modifyUserPrepareConfig",
        params
      );
      if (res.result) {
        ElMessage.success("设置权限成功");
        getTeacherList();
      } else {
        ElMessage.error(res.msg);
      }
    };
    /** 批量修改备课任务权限 */
    const batchChangePermission = async () => {
      if (teachersConfig.value.length < 1) return ElMessage.error("请选择教师");
      let formGroup: any = await modal.create({
        title: "批量设置权限",
        width: 520,
        zIndex: 2011,
        component: SForm,
        props: {
          hasPermission: false,
        },
      });
      const params = teachersConfig.value.map((ele) => {
        ele.config = JSON.stringify(Object.assign(ele.config, formGroup));
        return ele;
      });
      let res: any = await axios.post<null, { result: boolean; json: any }>(
        "/admin/prepareUserConfig/batchSetPreparePermission",
        params,
        { headers: { "Content-Type": "application/json" } }
      );
      if (res.result) {
        ElMessage.success("批量设置权限成功");
        teachersConfig.value = [];
        getTeacherList();
      } else {
        ElMessage.error(res.msg);
      }
    };
    /** 列表选中事件， 获取选中的教师的ID以及设置 */
    const getTeachersConfig = (selection) => {
      console.log(selection);
      teachersConfig.value = selection.map((ele) => {
        return {
          courseId: courseInfo.value.id,
          userId: ele.id,
          config: JSON.parse(ele.prepareConfig),
        };
      });
    };
    return {
      tableRef,
      getTeacherList,
      hasPermission,
      userName,
      setTask,
      setLessonState,
      timer,
      searchEvent,
      dictionaryForConfig,
      taskvisible,
      batchChangePermission,
      getTeachersConfig,
    };
  },
};
</script>

<style scoped lang="scss">
.box {
  .search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > div {
      display: flex;
      span {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        margin-left: 10px;
        display: flex;
        align-items: center;
      }
    }
  }
  .custom-table {
    margin-top: 14px;
    .tags {
      display: flex;
      & > span {
        display: flex;
        justify-content: center;
        height: 24px;
        padding: 0 15px 0 20px;
        line-height: 24px;
        border-radius: 3px;
        border: 1px solid #c4c6cf;
        position: relative;
        border-radius: 3px;
        &:not(:nth-child(2)) {
          margin-right: 20px;
        }
      }
      .tag-info {
        color: #999999;
      }
    }
  }
  .custom-table .el-table .el-table__header-wrapper {
    background: #f5f7fa;
  }
  :deep(.el-table__body-wrapper) {
    height: calc(100vh - 340px);
    overflow-y: auto;
  }
}
</style>

